<template>
	<view class="page">
		  <view class="top">
		  	<view class="title">
		  		09月汇总
		  	</view>
			<view class="title1">
				7818.1 <view class="danwei">
					元
				</view>
			</view>
		
	
			
		  </view>
		  <view class="bodybox">
			  <view class="titleline">
			  	  <view class="boxtitle">
			  	  	收支明细
			  	  </view>
			
			  </view>
			  <view class="typetabbox">
			  	<view class="itemtype" :class="type==0?'act':''" @click="selecttype(0)">
			  		全部
					<view class="line"></view>
			  	</view>
				<view class="itemtype" :class="type==1?'act':''" @click="selecttype(1)">
					收入
					<view class="line"></view>
				</view>
				<view class="itemtype" :class="type==2?'act':''" @click="selecttype(2)">
					支出
					<view class="line"></view>
				</view>
			  </view>
			  <view class="list">
			  	<view class="itemlist">
			  		<view class="left">
			  			 <view class="iconfont icon-shoukuandan">
			  			 	
			  			 </view>
						 <view class="contentbox">
						 	<view class="name">
						 		支出
						 	</view>
							<view class="time">
								2025-10-10 12:20:20
							</view>
						 </view>
			  		</view>
					<view class="right">
						<view class="money">
							+600
						</view>
						<view class="iconfont icon-xiangyou1">
							
						</view>
					</view>
			  	</view>
			  </view>
		  	
		  </view>
	</view>
</template>

<script>
	import {myWalletDetail} from '../../utils/api.js'
	export default {
		data() {
			return {
				type:0,
				list:[],
				
			}
		},
		onShow(){
			// let p={
			// 	phone:uni.getStorageSync('phone'),
			// 	day:7
			// }
			// myWalletDetail(p).then(res=>{
			// 	console.log(res)
			// })
		},
		methods: {
			selecttype(e){
				this.type=e
			},
			
		}
	}
</script>

<style lang="less" scoped>
   .page{
	   width: 750rpx;
	   box-sizing: border-box;
	   padding: 20rpx;
	   .top{
		   width: 100%;
		   height: 200rpx;
		   background-color: #1a4f8a;
		   color: white;
		   box-sizing: border-box;
		   padding: 30rpx;
		   border-radius: 20rpx;
		   .title{
			   line-height: 2;
			   text-align: center;
			   font-size: 28rpx;
		   }
		   .title1{
		   			   line-height: 2;
					   font-size: 40rpx;
		   			   text-align: center;
					   font-weight: bold;
					   display: flex;
					   align-items: center;
					   justify-content: center;
					   .danwei{
						   font-size: 28rpx;
						   line-height: 2.1;
					   }
					   
		   }
		   
		
	   }
	   .bodybox{
		   width: 100%;
		   border-radius: 20rpx;
		   margin-top: 20rpx;
		   height: 50vh;
		   box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
		   box-sizing: border-box;
		   padding: 20rpx;
		   .titleline{
			   width: 100%;
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   .boxtitle{
				   font-weight: bold;
			   }
			   .pickerbox{
				   width: 150rpx;
				   height: 40rpx;
				   .picker{
					  width: 150rpx;
					  height: 40rpx; 
					  display: flex;
					  align-items: center;
					  font-size: 30rpx;
				   }
			   }
		   }
		   .typetabbox{
			   display: flex;
			   align-items: center;
			   font-size: 28rpx;
			   margin-top: 30rpx;
			   .itemtype{
				   width: 70rpx;
				   text-align: center;
				   color: gray;
				   .line{
					   width: 50rpx;
					   height: 8rpx;
					   border-radius: 4rpx;
					   margin: 10rpx auto;
				   }
			   }
			   .act{
				   font-weight: bold;
				   color: black;
				   .line{
					   background-color: #1a4f8a;
				   }
			   }
			   
		   }
		   .list{
			   width: 100%;
			   .itemlist{
				   width: 92%;
				   margin:14rpx auto;
				   display: flex;
				   align-items: center;
				   
				   justify-content: space-between;
				   .left{
					   width: 60%;
					   display: flex;
					   align-items: center;
					   .iconfont{
						   font-size: 40rpx;
						   font-weight: bold;
						   color: #1a4f8a;
						   margin-right: 10rpx;
					   }
					   .contentbox{
						   .name{
							   font-weight: bold;
						   }
						   .time{
							   font-size: 26rpx;
							   color: gray;
						   }
					   }
				   }
				   .right{
					   display: flex;
					   align-items: center;
					   .money{
						  
						   font-weight: bold;
						   
					   }
					   .lv{
						   color: green;
					   }
					   .orange{
						   color: orangered;
					   }
					   .iconfont{
						   color: grey;
					   }
				   }
				   
			   }
			   
		   }
	   }
	   
	   
   }
</style>
